<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Google Map Javascript API V3 Examples</title>
    <style>
      html, body {
        font-size: 12px;
        margin: 0;
        padding: 0;
        overflow:hidden;
      }
      
      .map-title {
        background-color: #e7f3f6;
        height: 30px;
        line-height: 30px;
        margin: 0;
        padding: 3px 5px;
        border: solid 1px #C3D9FF;
        border-bottom: none;
        overflow: hidden;
      }
      
      #map_canvas {
        border: solid 1px #C3D9FF;
      }
      
      #map_result {
        padding: 0 10px;
        height: 100px;
        overflow: auto;
      }
    </style>
    <script type="text/javascript">
      if (parent != self && parent.google) {
        google = parent.google;
      } else {
        document.write('<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script\>');
      }
      
      function initialize(){
        var param = {
          'mapId': 'map_canvas',
          'resultId': 'map_result',
          'titleId': 'title',
          'lat': 33.990236,
          'lng': 106.929688,
          'zoom': 3
        };
        var result = window.location.search.match(/([^=^\?^&]+)=([^&^#]+)/g);
        if (result) {
          for (var i = result.length - 1; i >= 0; i--) {
            arr = result[i].split('=')
            param[arr[0]] = arr[1]
          }
        }
        try {
          loadDemo(param);
        } catch (e) {
          //alert('Demo loading error')
        }
        window.onresize = resize;
        resize();
      }
      
      function loadDemo(param){
        if (param['class']) {
          var apiClass = param['class'];
          if (!param['method']) {
            param['method'] = apiClass;
          }
          var arr = [];
          for (var key in param) {
            arr.push(key + '=' + param[key]);
          }
          var script = document.createElement("script");
          script.src = 'js/' + apiClass + '/' + param['method'] + '.js?' + arr.join('&');
          script.type = "text/javascript";
          var head = document.getElementsByTagName("head")[0];
          head.appendChild(script);
          var done = false;
          script.onload = script.onreadystatechange = function(){
            if (!done && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete")) {
              done = true;
              if (param && param['callback']) {
                var callback = param['callback'] + "();";
                try {
                  eval(callback);
                } catch (e) {
                  //chrome will be error when run in local machine with file:/// protocol
                  //                  alert('callback error:'+callback);
                }
              }
              // Handle memory leak in IE, stolen from jquery
              script.onload = script.onreadystatechange = null;
              head.removeChild(script);
            } else {
              alert(this.readyState);
            }
          };
          document.getElementById('title').innerHTML = apiClass.replace(apiClass.charAt(0), apiClass.charAt(0).toUpperCase()) + ' ' + param['method']
        } else {
          document.getElementById('map_canvas').innerHTML = '<h3 style="color:red">Please provide the class and method parameters in the url</h3>'
        }
      }
      
      function resize(){
        if (window.innerHeight) {
          document.getElementById('map_canvas').style.height = window.innerHeight - 150 + 'px';
        } else if (document.documentElement && document.documentElement.clientWidth) {
          document.getElementById('map_canvas').style.height = document.documentElement.clientHeight - 150 + 'px';
        } else if (document.body && document.body.clientHeight) {
          document.getElementById('map_canvas').style.height = document.body.clientHeight - 150 + 'px';
        }
      }
    </script>
  </head>
  <body onload="initialize()">
    <h3 class="map-title">Google Maps API: <a id="title" target="_blank"></a></h3>
    <div id="map_canvas">
    </div>
    <div id="map_result">
    </div>
  </body>
</html>
